<template>
  <div class="container">
    <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
      <a-row>
        <a-col :span="10" :offset="1">
          <div class="container-item">
            <div class="item-title">基本信息</div>

            <a-form-item v-if="requires.name !== 0" :colon="false" label="姓名">
              <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入' }] }]" />
            </a-form-item>

            <a-form-item v-if="requires.gender !== 0" :colon="false" label="性别">
              <a-select v-decorator="['gender']" :options="sexOptions" />
            </a-form-item>

            <a-form-item v-if="requires.birthday !== 0" :colon="false" label="出生日期">
              <a-date-picker v-decorator="['birthday']" type="date" />
            </a-form-item>

            <a-form-item v-if="requires.birthplace !== 0" :colon="false" label="籍贯">
              <area-component v-decorator="['birthplace']" :region.sync="birthplace" />
            </a-form-item>

            <a-form-item v-if="requires.nativeLocation !== 0" :colon="false" label="户籍所在地">
              <area-component v-decorator="['nativeLocation']" :region.sync="nativeLocation" />
            </a-form-item>

            <a-form-item v-if="requires.idCard !== 0" :colon="false" label="身份证号">
              <a-input v-decorator="['idCard']" />
            </a-form-item>

            <a-form-item v-if="requires.highestEducation !== 0" :colon="false" label="最高学历">
              <a-input v-decorator="['highestEducation']" />
            </a-form-item>

            <a-form-item v-if="requires.maritalStatus !== 0" :colon="false" label="婚姻状况">
              <a-select v-decorator="['maritalStatus']">
                <a-select-option value="1">未婚</a-select-option>
                <a-select-option value="2">初婚</a-select-option>
                <a-select-option value="3">再婚</a-select-option>
                <a-select-option value="4">离异</a-select-option>
                <a-select-option value="5">其他</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item v-if="requires.birthStatus !== 0" :colon="false" label="生育状况">
              <a-select v-decorator="['birthStatus']">
                <a-select-option value="1">未育</a-select-option>
                <a-select-option value="2">一孩</a-select-option>
                <a-select-option value="3">二孩</a-select-option>
                <a-select-option value="4">现孕</a-select-option>
                <a-select-option value="5">哺乳期</a-select-option>
                <a-select-option value="6">其他</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item v-if="requires.healthCondition !== 0" :colon="false" label="健康状况">
              <a-input v-decorator="['healthCondition']" />
            </a-form-item>
            <a-form-item v-if="requires.hasWeightyMedicalHis !== 0" :colon="false" label="重大病史或遗传病">
              <a-select v-decorator="['hasWeightyMedicalHis']">
                <a-select-option value="0">无</a-select-option>
                <a-select-option value="1">有</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item v-if="requires.nation !== 0" :colon="false" label="民族">
              <a-input v-decorator="['nation']" />
            </a-form-item>
            <a-form-item v-if="requires.politicalStatus !== 0" :colon="false" label="政治面貌">
              <a-input v-decorator="['politicalStatus']" />
            </a-form-item>
            <a-form-item v-if="requires.partyDate !== 0" :colon="false" label="入党时间">
              <a-input v-decorator="['partyDate']" />
            </a-form-item>
            <a-form-item v-if="requires.partySite !== 0" :colon="false" label="党组织关系所在地">
              <a-input v-decorator="['partySite']" />
            </a-form-item>
          </div>
          <div class="container-item">
            <div class="item-title">联系信息</div>

            <a-form-item v-if="requires.phone !== 0" :colon="false" label="手机号">
              <a-input v-decorator="['phone', { rules: [{ required: true, message: '请输入' }] }]" />
            </a-form-item>

            <a-form-item v-if="requires.email !== 0" :colon="false" label="邮箱">
              <a-input v-decorator="['email']" />
            </a-form-item>

            <a-form-item v-if="requires.currentLocation !== 0" :colon="false" label="居住地址">
              <area-component :region.sync="currentAddrId" />
              <a-input v-decorator="['currentLocation']" style="margin-top: 10px" />
            </a-form-item>
          </div>

          <div class="container-item">
            <div class="item-title">紧急联系人信息</div>

            <a-form-item v-if="requires.emerContact !== 0" :colon="false" label="姓名">
              <a-input v-decorator="['emerContact']" />
            </a-form-item>

            <a-form-item v-if="requires.emerPhone !== 0" :colon="false" label="联系电话">
              <a-input v-decorator="['emerPhone']" />
            </a-form-item>

            <a-form-item v-if="requires.emerLocation !== 0" :colon="false" label="联系地址">
              <a-input v-decorator="['emerLocation']" />
            </a-form-item>
          </div>
          <div class="container-item">
            <div class="item-title">银行开户信息</div>

            <a-form-item v-if="requires.bankCard !== 0" :colon="false" label="卡号">
              <a-input v-decorator="['bankCard']" />
            </a-form-item>

            <a-form-item v-if="requires.bankName !== 0" :colon="false" label="开户行">
              <a-input v-decorator="['bankName']" />
            </a-form-item>

            <a-form-item v-if="requires.bankPlace !== 0" :colon="false" label="开户地址">
              <a-input v-decorator="['bankPlace']" />
            </a-form-item>
          </div>
          <div class="container-item">
            <div class="item-title">社保信息</div>

            <a-form-item :colon="false" label="是否有社保">
              <a-select v-if="requires.socType !== 0" v-decorator="['socType']">
                <a-select-option value="0">无</a-select-option>
                <a-select-option value="1">有</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item v-if="requires.socCard !== 0" :colon="false" label="社保卡号">
              <a-input v-decorator="['socCard']" />
            </a-form-item>
          </div>
          <div class="container-item">
            <div class="item-title">补充信息</div>
            <a-form-item v-if="requires.putonghuaLevel !== 0" :colon="false" label="普通话等级">
              <a-input v-decorator="['putonghuaLevel']" />
            </a-form-item>
            <a-form-item v-if="requires.englishLevel !== 0" :colon="false" label="英语等级">
              <a-input v-decorator="['englishLevel']" />
            </a-form-item>
            <a-form-item v-if="requires.ncreLevel !== 0" :colon="false" label="计算机等级">
              <a-input v-decorator="['ncreLevel']" />
            </a-form-item>
            <a-form-item v-if="requires.prizeWinning !== 0" :colon="false" label="获奖情况">
              <a-input v-decorator="['prizeWinning']" />
            </a-form-item>
            <a-form-item v-if="requires.speciality !== 0" :colon="false" label="特长">
              <a-input v-decorator="['speciality']" />
            </a-form-item>
          </div>
        </a-col>

        <a-col :span="10" :offset="1">
          <div class="container-item">
            <div class="item-title">岗位信息</div>

            <a-form-item :colon="false" label="部门">
              <a-tree-select v-decorator="['depIdList']" :tree-data="depInfoOptions" multiple allow-clear />
            </a-form-item>

            <a-form-item :colon="false" label="岗位">
              <a-tree-select v-decorator="['positionIdList']" :tree-data="positionOptions" multiple allow-clear />
            </a-form-item>

            <a-form-item :colon="false" label="到岗时间">
              <a-date-picker v-decorator="['joinDate', { rules: [{ required: true, message: '请输入' }] }]" type="date" />
            </a-form-item>

            <a-form-item :colon="false" label="直属主管">
              <a-input v-decorator="['supervisor']" />
            </a-form-item>

            <a-form-item :colon="false" label="聘用形式">
              <a-select v-decorator="['employType', { rules: [{ required: true, message: '请输入' }] }]" :options="employTypeOptions" />
            </a-form-item>

            <a-form-item :colon="false" label="转正日期">
              <a-date-picker type="date" />
            </a-form-item>

            <a-form-item v-if="requires.number !== 0" :colon="false" label="工号">
              <a-input v-decorator="['number']" />
            </a-form-item>
          </div>

          <div class="container-item">
            <div class="item-title">附件信息</div>
            <a-form-item v-if="requires.annexBlackWhitePhoto !== 0" :colon="false" label="一寸白底电子版照片">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexBlackWhitePhoto', true)"
                  list-type="picture-card"
                  :file-list="BlackWhitePhotoList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="BlackWhitePhotoList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexIdCard !== 0" :colon="false" label="身份证照（正反面）">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexIdCard', false)"
                  list-type="picture-card"
                  :file-list="IdCardList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="IdCardList.length < 2">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexHousehold !== 0" :colon="false" label="户口本（首页、索引页、本人页）">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexHousehold', false)"
                  list-type="picture-card"
                  :file-list="HouseholdList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="HouseholdList.length < 3">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexMajor !== 0" :colon="false" label="专业资格证">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexMajor', true)"
                  list-type="picture-card"
                  :file-list="MajorList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="MajorList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexNcreLevel !== 0" :colon="false" label="计算机等级证书">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexNcreLevel', true)"
                  list-type="picture-card"
                  :file-list="NcreLevelList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="NcreLevelList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexNoCriminal !== 0" :colon="false" label="无犯罪记录证明">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexNoCriminal', true)"
                  list-type="picture-card"
                  :file-list="NoCriminalList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="NoCriminalList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexPractising !== 0" :colon="false" label="执业资格证">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexPractising', true)"
                  list-type="picture-card"
                  :file-list="PractisingList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="PractisingList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexPthLevel !== 0" :colon="false" label="普通话等级证书">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexPthLevel', true)"
                  list-type="picture-card"
                  :file-list="PthLevelList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="PthLevelList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexReward !== 0" :colon="false" label="奖励证明">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexReward', true)"
                  list-type="picture-card"
                  :file-list="RewardList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="RewardList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexEnglishLevel !== 0" :colon="false" label="英语等级证书">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexEnglishLevel', true)"
                  list-type="picture-card"
                  :file-list="EnglishLevelList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="EnglishLevelList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexDrivingLicense !== 0" :colon="false" label="机动车驾驶证">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexDrivingLicense', true)"
                  list-type="picture-card"
                  :file-list="DrivingLicenseList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="DrivingLicenseList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.annexDiploma !== 0" :colon="false" label="毕业证">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexDiploma', true)"
                  list-type="picture-card"
                  :file-list="DiplomaList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="DiplomaList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
            <a-form-item v-if="requires.nnexDegree !== 0" :colon="false" label="学位证">
              <div class="clearfix">
                <a-upload
                  :custom-request="p => uploadFiles(p, 'annexDegree', true)"
                  list-type="picture-card"
                  :file-list="DegreeList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="DegreeList.length < 1">
                    <a-icon type="plus" />
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <div class="button-area">
        <a-button class="mr20" @click="cancel">取消</a-button>
        <a-button type="primary" @click="addEmpInfo">提交</a-button>
      </div>
    </a-form>
  </div>
</template>
<script>
import { getDepartmentInTree } from "@/api/department/department";
import { getPositionInTree } from "@/api/department/position";
import { addEmpInfo } from "@/api/staff/staff";
import { getEmpInfoRequires } from "@/api/staff/entry";
import { uploadAttachmentFiles, saveSubjectAttachment, uploadFile } from "@/api/file/file";
import AreaComponent from "./area";

export default {
  name: "AddEmpInfo",
  components: { AreaComponent },
  props: ["status"],
  data() {
    return {
      requires: {},
      sexOptions: [
        { label: "请选择", value: "" },
        { label: "男", value: 1 },
        { label: "女", value: 2 }
      ],
      depInfoOptions: [], // 部门信息
      positionOptions: [],
      employTypeOptions: [
        { label: "请选择", value: "" },
        { label: "非正式", value: 0 },
        { label: "正式", value: 1 }
      ], // 聘用形式
      form: this.$form.createForm(this),
      pendingForm: this.$form.createForm(this),
      idCardSubjectId: "",
      previewVisible: false,
      previewImage: "",
      nativeLocation: "",
      birthplace: "",
      currentAddrId: "",

      annexHousehold: [],
      annexIdCard: [],

      IdCardList: [],
      DegreeList: [],
      DiplomaList: [],
      DrivingLicenseList: [],
      EnglishLevelList: [],
      RewardList: [],
      PthLevelList: [],
      NoCriminalList: [],
      NcreLevelList: [],
      MajorList: [],
      HouseholdList: [],
      BlackWhitePhotoList: [],
      PractisingList: [],

      pendingIdCardList: [],
      pendingIdCardSubjectId: "",
      pendingPreviewVisible: false,
      pendingPreviewImage: "",
      pendingNativeLocation: "",
      pendingEmpBirthplace: "",
      pendingEmpCurrentAddrId: ""
    };
  },
  watch: {
    status() {}
  },
  created() {
    this.companyId = this.$store.state.hr.companyId;
    getDepartmentInTree({ companyId: this.companyId }).then(res => {
      this.depInfoOptions = this.tree(res.data, "depChildList");
    });
    getPositionInTree({ companyId: this.companyId }).then(res => {
      this.positionOptions = this.tree(res.data, "positionChildList", true);
    });
    if (this.status === 1) {
      this.getRequires();
    }
  },
  methods: {
    // 获取显示规则
    getRequires() {
      getEmpInfoRequires(this.companyId, "entry").then(res => {
        this.requires = res.data;
      });
    },

    renderChange(keys, value) {
      let temp = this;
      for (let i = 0; i < keys.length - 1; i++) {
        temp = temp[keys[i]];
      }
      temp[keys[keys.length - 1]] = value;

      // 根据政治面貌判断是否显示 “入党时间” 和 “党组织关系所在地”
      if (keys[keys.length - 1] === "politicalStatus" && keys[keys.length - 3] === "baseInfo") {
        const idx = this.baseInfo.fieldList.findIndex(field => field["value"] === "partyDate");
        if (value === "1") {
          this.baseInfo.fieldList[idx]["show"] = true;
          this.baseInfo.fieldList[idx + 1]["show"] = true;
        } else {
          this.baseInfo.fieldList[idx]["show"] = false;
          this.baseInfo.fieldList[idx + 1]["show"] = false;
        }
      }
    },

    tree(array, childKey, onlyLastChild) {
      if (array === null || array.length < 1) {
        return [];
      }
      array.map((item, index) => {
        item["value"] = item.id;
        item["key"] = item.id;
        item["label"] = item.name;
        item["children"] = item[childKey];

        if (item.children) {
          item["disabled"] = onlyLastChild;
          this.tree(item.children, childKey, onlyLastChild);
        }
      });
      return array;
    },
    alertResultMessage(result) {
      let type = "success";
      if (result.code !== 200) {
        type = "error";
      }

      this.$notification[type]({
        message: result.msg
      });
    },
    addEmpInfo: function() {
      var that = this;

      this.form.validateFields((err, values) => {
        if (!err) {
          values.companyId = that.companyId;
          values.status = that.status;
          values.nativeLocation = that.nativeLocation;
          values.birthplace = that.birthplace;
          values.annexIdCard = that.annexIdCard.join(",");
          values.annexDegree = that.annexDegree;
          values.annexDiploma = that.annexDiploma;
          values.annexDrivingLicense = that.annexDrivingLicense;
          values.annexEnglishLevel = that.annexEnglishLevel;
          values.annexReward = that.annexReward;
          values.annexPthLevel = that.annexPthLevel;
          values.annexNoCriminal = that.annexNoCriminal;
          values.annexNcreLevel = that.annexNcreLevel;
          values.annexMajor = that.annexMajor;
          values.annexHousehold = that.annexHousehold.join(",");
          values.annexBlackWhitePhoto = that.annexBlackWhitePhoto;
          values.annexPractising = that.annexPractising;
          if (that.status === 2) {
            values.employType = 1;
            values.formalType = 1;
          }

          addEmpInfo(values).then(res => {
            that.alertResultMessage(res);
            if (res.code === 200) {
              //   that.$router.go(-1)
              that.cancel();
            }
          });
        }
      });
    },
    addPendingEmpInfo: function() {
      var that = this;
      this.pendingForm.validateFields((err, values) => {
        if (!err) {
          values = {
            companyId: that.companyId,
            name: values.empInfoDO.name,
            phone: values.empInfoDO.phone,
            status: 1,
            ...values.empInfoDO,
            empInfoDO: { status: 1 }
          };
          addEmpInfo(values).then(res => {
            that.alertResultMessage(res);
            if (res.code === 200) {
              that.$router.go(-1);
            }
          });
          // })
        }
      });
    },

    cancel: function() {
      this.$router.go(-1);
    },
    handleCancel(isPending) {
      this.previewVisible = false;
    },
    handlePreview(file, isPending) {
      const images = file.url || file.thumbUrl;
      const visible = true;

      if (isPending) {
        this.pendingPreviewImage = images;
        this.pendingPreviewVisible = visible;
      } else {
        this.previewImage = images;
        this.previewVisible = visible;
      }
    },
    handleChange({ fileList }, isPending) {},
    handleRemove(file, isPending) {
      if (isPending) {
        this.pendingIdCardList = this.pendingIdCardList.filter(item => item.uid !== file.uid);
      } else {
        this.idCardList = this.idCardList.filter(item => item.uid !== file.uid);
      }
      this.saveAttachment(isPending);
    },
    uploadFiles(params, type, bool) {
      var that = this;
      const formData = new FormData();
      formData.append("files", params.file);

      uploadFile(formData).then(res => {
        that[type.substr(5) + "List"].push({
          uid: res.data[0],
          name: res.data[0],
          status: "done",
          url: res.data[0]
        });
        if (bool) {
          that[type] = res.data[0];
        } else {
          that[type].push(res.data[0]);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  background: white;
  border-radius: 12px;
  padding-top: 10px;
  margin-bottom: 58px;
}

.container {
  width: 100%;
  background: white;
  border-radius: 12px;
  padding-top: 10px;
  margin-bottom: 58px;
}

.item-title {
  min-width: 80px;
  max-width: 140px;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 13px;
  text-align: center;
  background: rgba(255, 175, 79, 0.19);
  border-left: 2px solid var(--primary);
  margin: 20px 0 15px 70px;
}

.ant-form-item {
  margin-top: -5px;
}

>>> .ant-select,
.ant-calendar-picker,
.ant-cascader-picker,
.ant-input {
  width: 90%;
  height: 36px;
  background-color: #f5f5f5;
}
>>> .ant-cascader-input {
  height: 36px;
  background-color: #f5f5f5;
}

>>> .ant-select-selection,
>>> .ant-calendar-picker-input {
  background-color: #f5f5f5;
  height: 36px;
}

.button-area {
  width: 100%;
  height: 58px;
  line-height: 58px;
  border-top: 1px solid #e5e5e5;
  margin-top: 40px;
  text-align: right;
  padding-right: 40px;
  padding-top: 30px;
}
</style>
